<template>
  <div class="wrapper">
    <!--header-->
    <header>
      <p>商家信息</p>
    </header>
    <!--商家logo-->
    <div class="business-logo">
      <img :src="business.businessImg">
    </div>
    <!--商家信息-->
    <div class="business-info">
      <h1>{{business.businessName}}</h1>
      <p>&#165;{{business.starPrice}}起送  &#165;{{business.deliveryPrice}}配送</p>
      <p>{{business.businessExplain}}</p>
    </div>
    <!--食品列表-->
    <ul class="food">
      <li v-for="(item,index) in foodArr">
        <div class="left">
          <img :src="item.foodImg">
          <div class="info">
            <h3>{{item.foodName}}</h3>
            <p>{{item.foodExplain}}</p>
            <p>&#165;{{item.foodPrice}}</p>
          </div>
        </div>
        <div class="right">
          <div><i class="fa fa-minus-circle" @click="minus(index)" v-show="item.quantity!=0"></i></div>
          <p><span v-show="item.quantity!=0">{{item.quantity}}</span></p>
          <div><i class="fa fa-plus-circle" @click="add(index)"></i></div>
        </div>
      </li>
    </ul>
    <div class="pagebottom"></div>
    <!--购物车部分-->
    <div class="cart">
      <div class="left">
        <div class="icon" :style="totalQuantity==0?'background-color:#505051;':'background-color:#3190E8;'">
          <i class="fa fa-shopping-cart"></i>
          <div class="quantity" v-show="totalQuantity!=0">{{totalQuantity}}</div>
        </div>
        <div class="info">
          <p>&#165;{{totalPrice}}</p>
          <p>另需配送费{{business.deliveryPrice}}元</p>
        </div>
      </div>
      <div class="right">
        <!--不够配送费-->
        <div class="twosituations" v-show="totalSettle<business.starPrice" style="background-color: #535356;cursor: default;">
            &#165;{{business.starPrice}}起送
        </div>
        <!--够配送费-->
        <div class="twosituations" @click="toOrder" v-show="totalSettle>=business.starPrice">
          去结算
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "BusinessInfo",
  data(){
    return{
      businessId: this.$route.query.businessId,
      business:{},
      foodArr:[],
      user:{}
    }
  },
  created() {
    this.user=this.$getSessionStorage('user');

    //根据businessId查询商家信息
    this.$axios.post('BusinessController/getBusinessById',this.$qs.stringify({
      businessId: this.businessId
    })).then(response=>{
      this.business = response.data;
    }).catch(error=>{
      console.error(error);
    });

    //根据businessId查询所属食品信息
    this.$axios.post('FoodController/listFoodByBusinessId',this.$qs.stringify({
      businessId: this.businessId
    })).then(response=>{
      this.foodArr = response.data;
      for(let i=0;i<this.foodArr.length;i++){
        this.foodArr[i].quantity=0;
      }

      //如果已登录，需要查询购物车是否已经选购食品
      if(this.user!=null){
        this.listCart();
      }
    }).catch(error=>{
      console.error(error);
    });
  },
  methods:{
    listCart(){
      this.$axios.post('CartController/listCart',this.$qs.stringify({
        businessId: this.businessId,
        userId:this.user.userId
      })).then(response=>{
          let cartArr = response.data;
          //遍历所有食品列表
          for(let foodItem of this.foodArr){
           foodItem.quantity=0;
           for(let cartItem of cartArr){
             if(cartItem.foodId==foodItem.foodId){
               foodItem.quantity = cartItem.quantity;
             }
           }
          }
          this.foodArr.sort();
      }).catch(error=>{
        console.error(error);
      });
    },
    add(index){
      //首先登录验证
      if(this.user==null){
        this.$router.push({path:'/login'});
        return;
      }

      if(this.foodArr[index].quantity==0){
        //insert
        this.saveCart(index);
      }
      else{
        //update
        this.updateCart(index,1);
      }
    },
    minus(index){
      //首先登录验证
      if(this.user==null){
        this.$router.push({path:'/login'});
        return;
      }

      if(this.foodArr[index].quantity>1){
        //update
        this.updateCart(index,-1);
      }
      else{
        //delete
        this.removeCart(index);
      }
    },
    saveCart(index){
      this.$axios.post('CartController/saveCart',this.$qs.stringify({
        businessId: this.businessId,
        userId:this.user.userId,
        foodId:this.foodArr[index].foodId
      })).then(response=>{
        if(response.data==1){
          //此食品数量要更新为1；
          this.foodArr[index].quantity=1;
          this.foodArr.sort();
        }else{
          alert('向购物车中添加食品失败！');
        }
      }).catch(error=>{
        console.error(error);
      });
    },
    updateCart(index,num){
      this.$axios.post('CartController/updateCart',this.$qs.stringify({
        businessId: this.businessId,
        userId:this.user.userId,
        foodId:this.foodArr[index].foodId,
        quantity:this.foodArr[index].quantity+num
      })).then(response=>{
        if(response.data==1){
          //此食品数量要更新；
          this.foodArr[index].quantity+=num;
          this.foodArr.sort();
        }else{
          alert('向购物车中更新食品失败！');
        }
      }).catch(error=>{
        console.error(error);
      });
    },
    removeCart(index){
      this.$axios.post('CartController/removeCart',this.$qs.stringify({
        businessId: this.businessId,
        userId:this.user.userId,
        foodId:this.foodArr[index].foodId,
      })).then(response=>{
        if(response.data==1){
          //此食品数量要更新；
          this.foodArr[index].quantity=0;
          this.foodArr.sort();
        }else{
          alert('向购物车中删除食品失败！');
        }
      }).catch(error=>{
        console.error(error);
      });
    },
    toOrder(){
      this.$router.push({path:'/orders',query:{businessId:this.business.businessId}});
    }
  },
  computed:{
    //食品总价格
    totalPrice(){
      let total=0;
      for(let item of this.foodArr){
        total+=item.quantity*item.foodPrice;
      }
      return total;
    },
    //食品总数量
    totalQuantity(){
      let quantity=0;
      for(let item of this.foodArr){
        quantity+=item.quantity;
      }
      return quantity;
    },
    //结算价格
    totalSettle(){
      return this.totalPrice+this.business.deliveryPrice;
    }
  }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper{
  width: 100%;
  height: 100%;
}
/**************************header**************************/
.wrapper header{
  width: 100%;
  height:12vw;
  background-color: #0097FF;
  color: #FFF;
  font-size: 4.8vw;

  position: fixed;
  left:0;
  top: 0;
  z-index: 1000;

  display: flex;
  justify-content: center;
  align-items: center;
}

/**************************商家logo**************************/
.wrapper .business-logo{
  width: 100%;
  height: 35vw;
  margin-top: 12vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .business-logo img{
  width: 40vw;
  height: 30vw;
  border-radius: 5px;
}

.wrapper .business-info {
  width: 100%;
  height: 20vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.wrapper .business-info h1{
  font-size: 5vw;
}

.wrapper .business-info p{
  font-size: 3vw;
  color: #666;
  margin-top: 1vw;
}

/**************************食品列表**************************/
.wrapper .food{
  width: 100%;
}

.wrapper .food li{
  width:100%;
  box-sizing: border-box;
  padding: 2.5vw;
  user-select: none;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .food li .left{
  display: flex;
  align-items: center;
}

.wrapper .food li .left img{
  width: 20vw;
  height: 20vw;
}

.wrapper .food li .left .info{
  margin-left: 3vw;
}

.wrapper .food li .left .info h3{
  font-size: 3.8vw;
  color: #555;
}

.wrapper .food li .left .info p{
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}

.wrapper .food li .right{
  width: 16vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .food li .right .fa-minus-circle{
  font-size: 5.5vw;
  color: #999;
  cursor: pointer;
}

.wrapper .food li .right p{
  font-size: 3.6vw;
  color: #333;
}

.wrapper .food li .right .fa-plus-circle{
  font-size: 5.5vw;
  color: #0097EF;
  cursor: pointer;
}

.wrapper .pagebottom{
  width: 100%;
  height: 14vw;
}
/**************************购物车**************************/
.wrapper .cart{
  width: 100%;
  height:14vw;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
}

.wrapper .cart .left{
  flex:2;
  background-color: #505051;

  display: flex;
}

.wrapper .cart .left .icon{
  width: 16vw;
  height:16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190E8;
  font-size: 7vw;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: -4vw;
  margin-left: 3vw;

  position: relative;
}

.wrapper .cart .left .icon .quantity{
  width:5vw;
  height:5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right:-1.5vw;
  top:-1.5vw;
}

.wrapper .cart .left .info p:first-child{
  font-size: 4.5vw;
  color: #fff;
  margin-top: 1vw;
}

.wrapper .cart .left .info p:last-child{
  font-size: 2.8vw;
  color: #AAA;
}

.wrapper .cart .right{
  flex:1;
}
/**达到起送费**/

.wrapper .cart .right .twosituations{
  background-color: #38CA73;
  width: 100%;
  height:100%;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>